<style>
	#clock {
		font-family: 'Share Tech Mono', monospace;
		color: #ffffff;
		text-align: center;
		position: absolute;
		left: 83%;
		top: 45%;
		margin-top: 70px;
		max-width: 80%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #25a9da;
		text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
	}
	#clock .time {
		letter-spacing: 0.05em;
		font-size: 45px;
		padding: 5px 0;
	}
	#clock .date {
		letter-spacing: 0.1em;
		font-size: 24px;
	}
	#clock .text {
		letter-spacing: 0.1em;
		font-size: 12px;
		padding: 20px 0 0;
	}
	#waifu {
		left: 85%;
	}
</style>
<!-- <script
	type="text/javascript"
	src="https://blog-static.cnblogs.com/files/clwydjgs/vue.min.js"
></script> -->
<script src="https://blog-static.cnblogs.com/files/lezaizhu/vue.min.js"></script>
<script>
	var clock = new Vue({
		el: '#clock',
		data: {
			time: '',
			date: ''
		}
	})

	var week = [
		'星期天',
		'星期一',
		'星期二',
		'星期三',
		'星期四',
		'星期五',
		'星期六'
	]
	var timerID = setInterval(updateTime, 1000)
	updateTime()
	function updateTime() {
		var cd = new Date()
		clock.time =
			zeroPadding(cd.getHours(), 2) +
			':' +
			zeroPadding(cd.getMinutes(), 2) +
			':' +
			zeroPadding(cd.getSeconds(), 2)
		clock.date =
			zeroPadding(cd.getFullYear(), 4) +
			'-' +
			zeroPadding(cd.getMonth() + 1, 2) +
			'-' +
			zeroPadding(cd.getDate(), 2) +
			' ' +
			week[cd.getDay()]
	}

	function zeroPadding(num, digit) {
		var zero = ''
		for (var i = 0; i < digit; i++) {
			zero += '0'
		}
		return (zero + num).slice(-digit)
	}
</script>
<div
	class="clock-box"
	style="
		border-top: 1px dashed #ccc;
		padding: 5px;
		border-bottom: 1px dashed #ccc;
		height: 120px;
	"
>
	<div id="clock">
		<p class="date">{{ date }}</p>
		<p class="time">{{ time }}</p>
	</div>
</div>
<!-- <embed src="//music.163.com/style/swf/widget.swf?sid=2307767639&type=0&auto=1&width=310&height=90" width="330" height="110"  allowNetworking="all"></embed> -->
<a class="img-box" ref="https://www.cnblogs.com/lezaizhu/">
	<img
		src="https://gitee.com/lezaizhu/personal-storage-space/raw/master/avatar/dog.jpg"
	/>
</a>
<!-- 魔物娘?!??! -->
<!-- <link
	rel="stylesheet"
	type="text/css"
	href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"
/>
<link
	rel="stylesheet"
	type="text/css"
	href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"
/>
<link
	rel="stylesheet"
	type="text/css"
	href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"
/>
<div class="waifu" id="waifu">
	<div class="waifu-tips" style="opacity: 1"></div>
	<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
	<div class="waifu-tool">
		<span class="fui-home"></span>
		<span class="fui-chat"></span>
		<span class="fui-eye"></span>
		<span class="fui-user"></span>
		<span class="fui-photo"></span>
		<span class="fui-info-circle"></span>
		<span class="fui-cross"></span>
	</div>
</div>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
<script type="text/javascript">
	initModel()
</script> -->
